import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { http } from '../../utils/http';
import { LIVE_LIST,SHARE_UUID } from '../../constants/api';
import { AtAvatar,AtIcon } from 'taro-ui';
import {vcmonitor} from "../../utils/tools";
import './list.scss';
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"

interface roomInfoType {
    anchor_img: string
    anchor_name: string
    cover_img: string
    end_time: number
    goods: goodInfoType[]
    price: number
    url: string
    live_status: 101 | 102 | 103 | 104 | 105 | 106
    name: string
    roomid: number
    start_time: number
    is_seller: boolean
}
interface goodInfoType {
    cover_img: string
    name: string
    price: number
    url: string
}

export default class List extends Component {
    state: {
        listData: roomInfoType[]
    } = {
        listData: [],
    }
    // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常
    status = {
        101: '直播中',
        102: '未开始',
        103: '已结束',
        104: '禁播',
        105: '暂停中',
        106: '异常'
    }
    async onPullDownRefresh() {
        Taro.showNavigationBarLoading()
        const listData = (await http.post<roomInfoType[]>(LIVE_LIST, {})) || [];
        this.setState({ listData })
        Taro.hideNavigationBarLoading()
        Taro.stopPullDownRefresh()
    }
    async componentDidShow() {
      vcmonitor(this)
      if(process.env.TARO_ENV==='h5'){
        await h5Wx.getConfig()
        Taro.showModal({
          title: '提示',
          content: '该功能暂未开放，请使用小程序观看',
          showCancel: false,
          confirmText: '知道了',
          success(res) {
            Taro.navigateBack({
              delta: 1
            })
          }
        })
        return
      }
        const listData = (await http.post<roomInfoType[]>(LIVE_LIST, {})) || [];
        this.setState({ listData })
    }
    goto(roomid = 0, liveStatus = 101) {
        const url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + roomid;
        if(liveStatus === 103) {
            Taro.showModal({
                title: '提示',
                content: '当前直播已经结束，是否查看回放？',
                success: res => {
                    if(res.confirm) {
                        Taro.navigateTo({
                            url: '/common/live-player/playback?roomid=' + roomid
                        })
                    }
                    if(res.cancel) {
                        Taro.navigateTo({
                            url
                        })
                    }
                }
            })

        } else {
            Taro.navigateTo({
                url
            })
        }
    }
    share = async (item,e) =>{
        e.stopPropagation()
        const shares = JSON.stringify(item);
        // console.log(shares)
        const shareDate = (await http.post(SHARE_UUID,{data:shares})) || [];

        if(shareDate !== ''){
            Taro.navigateTo({
                url: '/common/live-player/detail?uuid=' + shareDate
            })
        }
    }



    render() {
        const { listData } = this.state
        return (
        <View className='live'>
          <GzhAuth />
            <View className='left'>
                {listData.length > 0 && listData.map((item, index) => {
                if(index%2 === 0) {
                    return (
                        <View key={item.roomid} hoverClass='none' className='live-item' onClick={this.share.bind(this,item)}>
                            <View className='cover-box'>
                                <Image className='cover-img' src={item.cover_img} mode='widthFix'></Image>
                                <View className='title'>{item.name}</View>
                                <View className='status'><Text className={`point ${item.live_status === 102 ? 'notyet' : ''} ${item.live_status >= 103 ? 'end' : ''}`}></Text><Text className='text'>{this.status[item.live_status]}</Text></View>
                                {item.live_status === 102 && <subscribe room-id={item.roomid}></subscribe>}
                            </View>
                            <View className='author'>
                                <AtAvatar circle image={item.anchor_img} size='small'></AtAvatar>
                                <View className='text' onClick={this.share.bind(this,item)}>
                                    <AtIcon prefixClass='xxhz' value='fenxiang1' size='15' color={`${process.env.mainColor}`}></AtIcon>
                                    <View className='shareTextBox'>
                                        {!item.is_seller && <Text className='shareText'>分享</Text>}
                                        {item.is_seller && <Text className='shareText'>我要分享</Text>}
                                    </View>
                                </View>
                            </View>
                        </View>
                    )
                }})}
            </View>
            <View className='right'>
                {listData.length > 0 && listData.map((item, index) => {
                if(index%2 === 1) {
                    return (
                        <View key={item.roomid} hoverClass='none' className='live-item' onClick={this.share.bind(this,item)}>
                            <View className='cover-box'>
                                <Image className='cover-img' src={item.cover_img} mode='widthFix'></Image>
                                <View className='title'>{item.name}</View>
                                <View className='status'><Text className={`point ${item.live_status === 102 ? 'notyet' : ''} ${item.live_status >= 103 ? 'end' : ''}`}></Text><Text className='text'>{this.status[item.live_status]}</Text></View>
                                {item.live_status === 102 && <subscribe room-id={item.roomid}></subscribe>}
                            </View>
                            <View className='author'>
                                <AtAvatar circle image={item.anchor_img} size='small'></AtAvatar>
                                <View className='text' onClick={this.share.bind(this,item)}>
                                    <AtIcon prefixClass='xxhz' value='fenxiang1' size='15' color={`${process.env.mainColor}`}></AtIcon>
                                    <View className='shareTextBox'>
                                        {!item.is_seller && <Text className='shareText'>分享</Text>}
                                        {item.is_seller && <Text className='shareText'>我要分享</Text>}
                                    </View>
                                </View>
                            </View>
                        </View>
                    )
                }})}
            </View>
        </View>
        )
    }
}
